<template>
  <span :endTime="endTime" :callback="callback" :endText="endText">
    <slot>
      <div class="djs">
        <div class="l">距离活动结束</div>
        <div class="r">
          <div class="txt day">{{ c_day }}天</div>
          <div class="txt">{{ c_hour }}</div>
          <div class="t">:</div>
          <div class="txt">{{ c_min }}</div>
          <div class="t">:</div>
          <div class="txt">{{ c_sec }}</div>
        </div>
      </div>
    </slot>
  </span>
</template>
<script>
export default {
  data() {
    return {
      content: "",
      c_day: "",
      c_hour: "",
      c_min: "",
      c_sec: ""
    };
  },
  props: {
    endTime: {
      type: String,
      default: ""
    },
    endText: {
      type: String,
      default: "已结束"
    },
    callback: {
      type: Function,
      default: ""
    }
  },
  mounted() {
    this.countdowm(this.endTime);
  },
  methods: {
    countdowm(timestamp) {
      let self = this;
      let timer = setInterval(function () {
        let nowTime = new Date();
        let endTime = new Date(timestamp);
        let t = endTime.getTime() - nowTime.getTime();
        if (t > 0) {
          let day = Math.floor(t / 86400000);
          let hour = Math.floor((t / 3600000) % 24);
          let min = Math.floor((t / 60000) % 60);
          let sec = Math.floor((t / 1000) % 60);
          hour = hour < 10 ? "0" + hour : hour;
          min = min < 10 ? "0" + min : min;
          sec = sec < 10 ? "0" + sec : sec;
          let format = "";
          if (day > 0) {
            format = `${day}天${hour}小时${min}分${sec}秒`;
            self.c_day = day < 10 ? "0" + day : day;
            self.c_hour = hour;
            self.c_min = min;
            self.c_sec = sec;
          }
          if (day <= 0 && hour > 0) {
            format = `${hour}小时${min}分${sec}秒`;
            self.c_hour = hour;
            self.c_min = min;
            self.c_sec = sec;
          }
          if (day <= 0 && hour <= 0) {
            format = `${min}分${sec}秒`;
            self.c_min = min;
            self.c_sec = sec;
          }
          self.content = format;
        } else {
          clearInterval(timer);
          self.content = self.endText;
          self._callback();
        }
      }, 1000);
    },
    _callback() {
      if (this.callback && this.callback instanceof Function) {
        this.callback(...this);
      }
    }
  }
};
</script>
<style scoped lang="scss">
.djs {
  font-size: 10px;
  width: 100%;
  height: 100%;
  background: #272636;
  border-radius: 10px 10px 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .l {
    color: #ffffff;
    margin-left: 20px;
    padding-right: 10px;
  }
  .r {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    .txt {
      padding: 0 10px;
      height: 24px;
      line-height: 24px;
      background: #f6f8fa;
      border-radius: 4px 4px 4px 4px;
    }
    .t {
      color: #fff;
      padding: 0 5px;
    }
    .day {
      color: #ff3333;
      margin-right: 10px;
    }
  }
}
</style>
